import React, { Component } from 'react'
import '../assets/css/uncenter.css'
import { getBanner } from '../request/register'
import { Carousel } from 'antd';
import 'antd/lib/carousel/style/index.css'
export default class uncenter extends Component {
    state = {
        naickname:'',
        banner_list:[],
    }
    logout(){
        localStorage.removeItem('loginData')
        this.props.history.push('/login')
    }
    UNSAFE_componentWillMount(){
        const userinfo = JSON.parse(localStorage.getItem('loginData')||'{}')
        this.setState({nickname:userinfo.nickname})
        
        getBanner().then(res=>{
            if(res.code===200){
                this.setState({banner_list:res.list})
            }
        })
    }
    render() {
        const {nickname,banner_list} = this.state
        return (
            <>
                <div className="page-title">会员中心</div>
                <div className="container">
                    <div className="top">
                        <div className="header">
                            <div className="avatar">
                                <img src="./assets/imgs/pic/04.png" alt="" />
                            </div>
                            <div className="info">
                                <h3>{nickname}</h3>
                            </div>
                            <div className="tag">每日签到</div>
                        </div>
                        <ul className="info-list">
                            <li>
                                <h3>12</h3>
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <h3>12</h3>
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <h3>&yen;12</h3>
                                <p>我的红包</p>
                            </li>
                            <li>
                                <h3>12</h3>
                                <p>优惠券</p>
                            </li>
                        </ul>
                        <div className="order-info">
                            <div className="title">
                                <h3>我的订单</h3>
                                <span>全部订单 &gt; </span>
                            </div>
                            <ul>
                                <li>
                                    <img src="./assets/imgs/icon/payment.png" alt="" />
                                    <p>待付款</p>
                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/delivery.png" alt="" />
                                    <p>待收货</p>

                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/evaluation.png" alt="" />
                                    <p>评价</p>

                                </li>
                                <li>
                                    <img src="./assets/imgs/icon/service.png" alt="" />
                                    <p>售后/退款</p>

                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="banner">
                        <Carousel autoplay>
                            {
                                banner_list.map(item=>{return <img key={item.id} src={this.$static_url+item.img} alt='图片出错啦'/>
                                })
                            }
                        </Carousel>
                    </div>

                    <ul className="section">
                        <li>地址管理</li>
                        <li>我的钱包</li>
                        <li>我的二维码</li>
                        <li>我的小伙伴</li>
                        <li>0元试用</li>
                        <li onClick={this.logout.bind(this)}>退出登录</li>
                    </ul>
                </div>
            </>
        )
    }
}
